<template>
  <div class="center-container">
    <form @submit.prevent="sendRegisterRequest" class="form-content">
      <label for="parkingRecordID">单号:</label>
      <a-input
        type="text"
        id="parkingRecordID"
        v-model="request.parkingRecordID"
        placeholder="请输入单号"
      />

      <label for="carnumber">车牌号:</label>
      <a-input
        type="text"
        id="carnumber"
        v-model="request.carnumber"
        placeholder="请输入车牌号"
      />

      <a-button type="primary" html-type="submit">停车</a-button>
    </form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";
import message from "@arco-design/web-vue/es/message";

// 定义请求数据结构
const request = ref({
  parkingRecordID: null,
  carnumber: "",
});

// 发送注册请求的方法
async function sendRegisterRequest() {
  try {
    const response = await axios.post(
      "http://localhost:8101/api/parking/register",
      request.value,
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    );
    if (response.data.code === 50000) {
      message.error("请求错误! 该车已在停车位中");
      return;
    }
    // 请求成功，处理响应
    message.success("停车成功! ");
    console.log("注册成功", response.data.code);
  } catch (error) {
    console.log(error);
  }
}
</script>

<style scoped>
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器高度占满整个视口高度 */
  padding: 20px;
}

.form-content {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 增加表单元素之间的间隙 */
  margin-top: -275px; /* 略微向上调整表单内容 */
}

a-form {
  width: 100%; /* 使表单宽度自适应 */
}
</style>
